<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { useTokenStore } from '@/store/token'
import { useShowLoginDialogStore } from '@/store/showLoginDiaolg'
import { doArticleLikeService } from '@/api/forumArticle';

// 父组件传递过来的参数
let props = defineProps({
  forumArticleId: {
    type: Number,
  },
  haveLike: {
    type: Boolean,
  },
  likeCount: {
    type: Number,
  },
  commentCount: {
    type: Number,
  }
})

// token状态
const tokenStore = useTokenStore();
// 登录框状态
const showLoginDialogStore = useShowLoginDialogStore();

// 父组件方法
const emit = defineEmits(['parentDoArticleLike']);

// 文章点赞
const doArticleLike = async () => {
  // 前端 发送结果之前先判断是否有token，若无token则证明未登录，显示登录框
  if (!tokenStore.getToken()) {
    // 若无token，则显示登录框
    showLoginDialogStore.setShowLoginDialog(true)
    return
  }

  // 发送文章点赞请求
  let result = await doArticleLikeService({
    "articleId": props.forumArticleId
  })

  // 子组件调用父组件方法 修改点赞结果（点赞取反，点赞数+或-1）
  emit('parentDoArticleLike');
}

// 左侧快捷操作：根据锚点id进行滚动跳转
const goToPosition = (domId) => {
  document.querySelector('#' + domId).scrollIntoView({
    behavior: 'smooth'
  })
}

</script>

<template>
  <!-- 左侧快捷操作：点赞、评论、下载附件 -->
  <div class="quick-panel">
    <div class="quick-panel-content">
      <!-- 点赞 -->
      <el-badge :value="likeCount" type="info">
        <div class="item" @click="doArticleLike"><span
            :class="['iconfont icon-dianzan_kuai', haveLike ? 'active' : '']"></span></div>
      </el-badge>
      <!-- 下载附件 -->
      <div class="item" @click="goToPosition('article-attachment')"><span class="iconfont icon-fujian2"></span>
      </div>
      <!-- 评论 -->
      <el-badge :value="commentCount" type="info">
        <div class="item" @click="goToPosition('article-comment')"><span class="iconfont icon-pinglun"></span>
        </div>
      </el-badge>
    </div>
  </div>
</template>

<style>
/* 左侧快捷方式 */
.quick-panel {
  /* background-color: pink; */
  width: 100px;
  height: 200px;
  /* 子集开启绝对定位，将盒子定位到文章详情左侧 */
  position: absolute;
  left: -80px;
  top: 50px;
}

.quick-panel .quick-panel-content {
  /* 因为fixed无法根据父级定位，所以将fixed布局套到absolute布局中即可 */
  position: fixed;
  /* background-color: blue; */

  display: flex;
  flex-wrap: wrap;
  width: 50px;
}

.quick-panel-content .item {
  width: 50px;
  height: 50px;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  box-shadow: 5px 5px 12px rgba(0, 0, 0, .10);
}

.quick-panel .quick-panel-content .item:hover .iconfont {
  color: #555666;
}

.quick-panel .quick-panel-content .item .iconfont {
  font-size: 22px;
  color: #8a919f;
}

.quick-panel .quick-panel-content .el-badge__content.is-fixed {
  top: 5px;
  right: 15px;
}

.quick-panel .quick-panel-content .item .active {
  color: red !important;
}
</style>